<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>超市零售系统</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link th:href="@{/vendor/fonts/circular-std/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/libs/css/style.css}">
    <link rel="stylesheet" th:href="@{/vendor/fonts/fontawesome/css/fontawesome-all.css}">
    <link rel="stylesheet" th:href="@{/vendor/datepicker/tempusdominus-bootstrap-4.css}"/>
    <link rel="stylesheet" th:href="@{/vendor/inputmask/css/inputmask.css}"/>
    <style type="text/css">
        #container {
            overflow: hidden;
        }

        /* 清除浮bai动 */
        /*#container div{width:200px;height:100px;}*/
        .box1 {
            float: right;
        }
    </style>
</head>

<body id="backbody">
<div class="dashboard-main-wrapper">

    <!-- navbar -->

    <div class="dashboard-header">
        <div th:insert="~{commons/commons::topBar}"></div>
    </div>

    <!-- end navbar -->


    <!-- left sidebar -->

    <div class="nav-left-sidebar sidebar-dark">
        <div class="menu-list">
            <div th:insert="~{commons/commons::sideBar}"></div>
        </div>
    </div>

    <!-- end left sidebar -->


    <!-- wrapper  -->

    <div class="dashboard-wrapper">
        <div class="container-fluid  dashboard-content">

            <!-- pageheader -->

            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="page-header">
                        <h2 class="pageheader-title">购物车</h2>
                        <p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit
                            amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
                        <div class="page-breadcrumb">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>

            <br>
            <!-- end pageheader -->

            <div class="row" th:if="${#lists.isEmpty(shoppingCar)}">
                <h1>&nbsp;&nbsp;&nbsp;&nbsp;非常抱歉！当前购物车为空~</h1>
                <img class="logo-img imagebox" th:src="@{/images/sorry.jpg}">
            </div>
            <div class="row" id="shoppingtable" th:if="${not #lists.isEmpty(shoppingCar)}">

                <!-- basic table  -->

                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="card" id="shoppingCard">
                        <br>
                        <h2 class="card-header" id="shoppingH5">购物车</h2>
                        <br>
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table table-striped table-bordered first text-center">
                                    <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>名称</th>
                                        <th>单价</th>
                                        <th>数量</th>
                                        <th>总价</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="product : ${shoppingCar}">
                                        <td th:text="${product.getProduct_id()}"></td>
                                        <td th:text="${product.getProduct_name()}"></td>
                                        <td th:text="${product.getProduct_export_price()}"></td>
                                        <td th:text="${product.getProduct_count()}"></td>
                                        <td th:text="${product.getProduct_total()}"></td>
                                        <td>
                                            <a class="btn btn-sm btn-success"
                                               th:href="@{/shopping/addOne/}+${product.getProduct_id()}">+</a>
                                            <a class="btn btn-sm btn-primary"
                                               th:href="@{/shopping/subOne/}+${product.getProduct_id()}">-</a>
                                            <a class="btn btn-sm btn-danger"
                                               th:href="@{/shopping/removeAll/}+${product.getProduct_id()}">X</a>
                                            <!--  <a class="btn btn-sm btn-danger" th:href="@{/book/deleteBook/}+${book.bookID}">删除</a>-->
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>


                            <div>
                                <br>
                                <br>
                                <br>
                                <div>
                                    <div class="box1">
                                        <a class="btn btn-large btn-block btn-success" onclick="doDeal()"
                                           th:href="@{/shopping/order/}+${isVip}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结算&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                                    </div>

                                    <div class="box1" th:if="${not #strings.isEmpty(discount)}">
                                        <h1>元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
                                    </div>
                                    <div class="box1" th:if="${not #strings.isEmpty(discount)}">
                                        <h1>
                                            <div th:text="${discount}"></div>
                                        </h1>
                                    </div>
                                    <div class="box1" th:if="${not #strings.isEmpty(discount)}">
                                        <h1>折后价：</h1>
                                    </div>

                                    <div class="box1">
                                        <h2>元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
                                    </div>
                                    <div class="box1">
                                        <h2>
                                            <div th:text="${total}"></div>
                                        </h2>
                                    </div>
                                    <div class="box1">
                                        <h2>总价：</h2>
                                    </div>
                                </div>
                                <div class="box1">
                                    <p><input type="checkbox" name="checkVip" onclick="newFile()"/>是否是会员&nbsp;&nbsp;&nbsp;&nbsp;
                                    </p>
                                </div>
                            </div>

                            <div id="my_dialog" style="display: none" align="center">
                                <h3>请填写会员信息</h3>
                                <hr>
                                <form action="/vip/verifyVip" method="post">

                                    <p>会员编号：<input type="text" id="username" name="userId"/></p>
                                    <p>电话号码：<input type="text" id="telephone" name="telephone"/></p>
                                    <div align="center">
                                        <button class="btn btn-sm btn-success" type="submit">提交</button>
                                        <button class="btn btn-sm btn-danger" onclick="closeDialog()">取消</button>
                                    </div>
                                </form>
                            </div>
                            <div><p align="center" style="color:red" th:text="${msg}"
                                    th:if="${not #strings.isEmpty(msg)}"></p></div>
                            <script>
                                function doDeal() {
                                    alert("交易成功！");
                                }
                            </script>
                        </div>
                    </div>
                </div>

                <!-- end basic table  -->

            </div>
        </div>

        <!-- end footer -->
        <div class="footer">
            <div class="container-fluid">
                <div th:insert="~{commons/commons::footer}"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/vendor/jquery/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/vendor/jquery/jquery-ui.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.js}"></script>
<script th:src="@{/vendor/slimscroll/jquery.slimscroll.js}"></script>
<script th:src="@{/vendor/multi-select/js/jquery.multi-select.js}"></script>
<script th:src="@{/libs/js/main-js.js}"></script>

<script th:src="@{/vendor/datatables/js/dataTables.bootstrap4.min.js}"></script>
<script th:src="@{/vendor/datatables/js/buttons.bootstrap4.min.js}"></script>
<script th:src="@{/vendor/datatables/js/data-table.js}"></script>
</body>
<script>
    /*新建文件*/
    function newFile() {
        showdiv();
        $('#backbody').css("backgroundColor", "gray");
        $('#shoppingtable').css("backgroundColor", "gray");
        $('#shoppingH5').css("backgroundColor", "gray");
        $('#shoppingCard').css("backgroundColor", "gray");
    };


    function showdiv() {
        $('#my_dialog').dialog({
            modal: true,
            width: "400",
            height: "233",
            closeOnEscape: false,
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            }
        });
        $('#my_dialog').css({
            display: 'block',
            border: '3px double black',
            height: '250px',
            padding: '10px',
            backgroundColor: 'white',
            borderRadius: '5px',
            boxShadow: '2px 2px 2px 2px 1px rgb(0,0,0,0.2)'
        });
        document.getElementById("my_dialog").style.display = "block";
    };

    function closeDialog() {
        document.getElementById("my_dialog").close();
    }
</script>
</html>